<template>
  <el-container style="height: 1000px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1','2', '3','4']">
        <el-menu-item-group>
            <el-menu-item index="4-1" @click.native="clicksee"  ><i class="el-icon-pie-chart"></i>数据可视化</el-menu-item>
          </el-menu-item-group>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-custom"></i>用户管理</template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click.native="fetchData"  ><i class="el-icon-arrow-right"></i>查询所有用户</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-s-shop"></i>商户管理</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click.native="selectallmerchat"><i class="el-icon-arrow-right"></i>查询所有商户</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-s-home"></i>租房管理</template>
          <el-menu-item-group>
            <template slot="title">商户</template>
            <el-menu-item index="3-1" @click.native="merchanthouse" ><i class="el-icon-arrow-right"></i>房源管理</el-menu-item>
            <el-menu-item index="3-2" @click.native="merchantevaluatefun" ><i class="el-icon-arrow-right" ></i>对商户评价</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="用户">
            <el-menu-item index="3-3" @click.native="dingdanguanli"><i class="el-icon-arrow-right"></i>订单管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
  <i class="el-icon-setting" style="margin-right: 15px"></i>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="goToLoginPage">退出到登录页</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
        <i class="el-icon-user"></i>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>超级管理员</span>
      </el-header>
      <el-main v-if="showuserTable">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="handleAdd">新增用户</el-button>
        <el-table :data="tableData">
          <el-table-column prop="id" label="id" width="290">
          </el-table-column>
          <el-table-column prop="name" label="用户名" width="295">
          </el-table-column>
          <el-table-column prop="account" label="账号" width="290">
          </el-table-column>
          <el-table-column prop="password" label="密码" width="290">
          </el-table-column>
          <el-table-column label="修改" width="240">
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="240">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 对商户评价 -->
      <el-main v-if="merchantevaluate">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="selectmerchanteva">搜索</el-button>
        <el-table :data="evaluatemerchantData">
          <el-table-column prop="id" label="id" width="100">
          </el-table-column>
          <el-table-column prop="userid" label="用户id" width="100">
          </el-table-column>
          <el-table-column prop="merchantid" label="商户id" width="100">
          </el-table-column>
          <el-table-column prop="star" label="星级" width="100">
          </el-table-column>
          <el-table-column prop="evaluate" label="评价" width="1040">
          </el-table-column>
          <el-table-column label="修改" width="100">
            <template slot-scope="scope">
              <el-button @click="editevaluate(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deletemerchantevaluate(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 订单界面 -->
      <el-main v-if="dingdanguanlixianshi">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="sousuodingdan">搜索</el-button>
        <el-table :data="orderdata">
          <el-table-column prop="id" label="id" width="100">
          </el-table-column>
          <el-table-column prop="houseid" label="房子id" width="100">
          </el-table-column>
          <el-table-column prop="userid" label="用户id" width="100">
          </el-table-column>
          <el-table-column label="修改" width="100">
            <template slot-scope="scope">
              <el-button @click="bianjidingdanfangfa(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deleteorder(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 数据可视化 -->
      <el-main v-if="see">
        <template>
          <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <i class="el-icon-s-flag" style="color: #ccc"></i>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="value2"
            :title="title1"
          ></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="男女比例">
            <template slot="formatter">
              <i class="el-icon-s-flag" style="color: #87ceeb"></i>
              1.1/1.0
              <i class="el-icon-s-flag" style="color:  #ffb6c1"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            decimal-separator="."
            :value="value1"
            :title="title">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: pink"></i>
            </template>
            <template slot="suffix">
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="star" title="点赞数量">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                  class="el-icon-star-on"
                  style="color:red"
                  v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
    <!-- 这里是你的饼图结构 -->
    <div class="custom-chart">
      <div class="piechart">
  <div class="slice" data-label="用户   数量"></div>
  <div class="slice" data-label="商户   数量"></div>
  <!-- 添加其他区块 -->
</div>
    </div>
<div class="custom-pie">
  <div class="chart">
  <div class="bar male"> <span>男</span></div>
  <div class="bar female"><span>女</span></div>
</div>
</div>
<div class="custom-pie11">
  <div class="pie">
  <span>{{star}}</span>
</div>
</div>
      </el-main>
      <el-main v-if="showmerchantTable">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch1">搜索</el-button>
        <el-button type="primary" @click="handleAdd1">新增商户</el-button>
        <el-table :data="tableData1">
          <el-table-column prop="id" label="id" width="290">
          </el-table-column>
          <el-table-column prop="name" label="商户名" width="295">
          </el-table-column>
          <el-table-column prop="account" label="账号" width="290">
          </el-table-column>
          <el-table-column prop="password" label="密码" width="290">
          </el-table-column>
          <el-table-column label="修改" width="240">
            <template slot-scope="scope">
              <el-button @click="handleEdit1(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="240">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="merchantDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-main v-if="showmerchanthouse">
        <el-input v-model="searchText" placeholder="请输入搜索内容" :style="{ width: '300px' }"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="selecthouse">搜索</el-button>
        <el-button type="primary" @click="addhouseVisible4=true">新增房源</el-button>
        <el-table :data="allhouseData">
          <el-table-column prop="id" label="id" width="50">
          </el-table-column>
          <el-table-column prop="housename" label="房子名称" width="280">
          </el-table-column>
          <el-table-column prop="addr" label="房子地址" width="280">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
          </el-table-column>
          <el-table-column prop="bedroom" label="居室" width="85">
          </el-table-column>
          <el-table-column prop="facilityservices" label="设施服务" width="150">
          </el-table-column>
          <el-table-column label="图片" width="300">
  <template slot-scope="scope">
    <div style="display: flex;">
      <img v-for="image in scope.row.image" :key="image" :src="'http://localhost:8081/img/' + image" alt="图片" style="width: 50px; height: auto; margin-right: 5px;">
    </div>
  </template> 
</el-table-column>
          <el-table-column prop="masterid" label="主人id" width="100">
          </el-table-column>
          <el-table-column label="修改" width="150">
            <template slot-scope="scope">
              <el-button @click="a(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="deletehouse(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <!-- 新增编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible1" title="新增用户编辑信息">
      <!-- 编辑表单 -->
      <el-form ref="editForm" :model="editForm">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- 编辑对话框的按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmEdit1">确定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑订单对话框 -->
    <el-dialog :visible.sync="bianjidingdan" title="修改订单信息">
      <!-- 编辑表单 -->
      <el-form ref="bianjidingdandata" :model="bianjidingdandata">
        <el-form-item label="房子id">
          <el-input v-model="bianjidingdandata.houseid"></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input v-model="bianjidingdandata.userid"></el-input>
        </el-form-item>
        
      </el-form>
      <!-- 编辑对话框的按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="bianjidingdan = false">取消</el-button>
        <el-button type="primary" @click="quedingxiugaidingdanfangfa">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增房源编辑对话框 -->
<el-dialog :visible.sync="addhouseVisible4" title="新增房源信息">
  <el-form ref="addPropertyForm" :model="addPropertyForm">
    <el-form-item label="房子名称">
      <el-input v-model="addPropertyForm.housename"></el-input>
    </el-form-item>
    <el-form-item label="房子地址">
      <el-input v-model="addPropertyForm.addr"></el-input>
    </el-form-item>
    <el-form-item label="价格">
      <el-input v-model="addPropertyForm.price"></el-input>
    </el-form-item>
    <el-form-item label="居室">
      <el-input v-model="addPropertyForm.bedroom"></el-input>
    </el-form-item>
    <el-form-item label="设施服务">
      <el-input v-model="addPropertyForm.facilityservices"></el-input>
    </el-form-item>
    <el-form-item label="主人">
      <el-input v-model="addPropertyForm.masterid"></el-input>
    </el-form-item>
    <!-- Other property details inputs -->
    <!-- Image uploads -->
    <el-form-item label="上传照片">
      <el-upload
        class="upload-demo"
        action="your_image_upload_endpoint"
        :on-success="handleUploadSuccess"
        :on-remove="handleRemoveImage"
        :limit="4"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addhouseVisible4 = false">取消</el-button>
    <el-button type="primary" @click="addhouse">确定</el-button>
  </span>
</el-dialog>
    <!-- 新增商户编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible3" title="新增商户编辑信息">
      <!-- 编辑表单 -->
      <el-form ref="editForm1" :model="editForm">
        <el-form-item label="商户名">
          <el-input v-model="editForm1.merchantname"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm1.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm1.password"></el-input>
        </el-form-item>
      </el-form>
      <!-- 编辑对话框的按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="xinzengshanghu">确定</el-button>
      </span>
    </el-dialog>
    <!-- 修改编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="编辑信息">
      <el-form ref="editForm" :model="editForm">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmEdit">确定</el-button>
      </span>
    </el-dialog>
    <!-- 对商家评价修改对话框 -->
    <el-dialog :visible.sync="evaluateEdit" title="修改评价信息">
      <el-form ref="editEvaForm" :model="editForm">
        <el-form-item label="星级">
          <el-input v-model="editEvaForm.star"></el-input>
        </el-form-item>
        <el-form-item label="评价">
          <el-input v-model="editEvaForm.evaluate"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="evaluateEdit = false">取消</el-button>
        <el-button type="primary" @click="changeva">确定</el-button>
      </span>
    </el-dialog>
    <!-- 商户编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible2" title="编辑信息">
      <el-form ref="editForm1" :model="editForm">
        <el-form-item label="商户名">
          <el-input v-model="editForm1.merchantname"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm1.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm1.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmEdit2">确定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template><script>
import axios from 'axios';
export default {
  mounted() {
    this.clicksee()
  },
  data() {
    return {
      tableData: [], // 初始化tableData为空数组
      seeData:[],
      tableData1: [],
      allhouseData: [],
      orderdata: [],
      evaluatemerchantData: [],
      dialogVisible: false, // 控制编辑对话框的显示
      dialogVisible1: false, // 控制编辑对话框的显示
      evaluateEdit:false,
      bianjidingdan:false,
      dialogVisible2: false,
      dialogVisible3: false,
      showuserTable: false,
      showmerchantTable: false,
      showmerchanthouse:false,
      merchantevaluate:false,
      dingdanguanlixianshi: false,
      see:false,
      searchText:'',
      editForm: {
        username: '',
        account: '',
        password: ''
      },
      editForm1: {
        merchantname: '',
        account: '',
        password: ''
      },
      editEvaForm: {
        id:'',
        star: '',
        evaluate: '',
      },  
      addhouseVisible4: false,
      addPropertyForm: {
        housename: '',
        addr: '',
        price: '',
        bedroom: '',
        facilityservices: '',
        masterid: '',
      },
      bianjidingdandata:{
        id: '',
        houseid: '',
        userid: '',
      },
      uploadedImages: [], 
      like: true,
      value1: 114514,
      value2: 1314,
      title: "商户数量",
      title1: "用户数量",
      star:1,
    };
  },
  methods: {
    goToLoginPage() {
      this.$router.push({ name: 'dlzc' })
    },
    fetchData() {
      this.see=false
      this.showuserTable = true 
      this.showmerchantTable =false
      this.showmerchanthouse = false
      this.merchantevaluate = false
      this.dingdanguanlixianshi = false
      axios.get('http://localhost:8081/user/findalluser')
        .then(response => {
          console.log('响应数据：', response.data);
          this.tableData = response.data.map(user => ({
            id: user.id,
            name: user.username,
            account: user.useraccount,
            password: user.userpassword
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    clicksee() {
      this.see=true
      this.showuserTable = false 
      this.showmerchantTable =false
      this.showmerchanthouse = false
      this.merchantevaluate = false
      this.dingdanguanlixianshi = false
      axios.get('http://localhost:8081/see/see')
        .then(response => {
          console.log('响应数据：', response.data);
            this.seeData = response.data.map(see => ({
              usercount: see.usercount,
              merchantcount: see.merchantcount,
              starcount: see.starcount
            }));
        this.value2=this.seeData[0].usercount
        this.value1=this.seeData[0].merchantcount
        this.star=this.seeData[0].starcount
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    merchanthouse() {
      this.see=false
      this.showuserTable = false 
      this.showmerchantTable =false
      this.showmerchanthouse = true
      this.merchantevaluate = false
      this.dingdanguanlixianshi = false
      axios.get('http://localhost:8081/house/findallhouse')
        .then(response => {
          console.log('响应数据：', response.data);
          this.allhouseData = response.data.map(house => ({
            id: house.id,
            housename: house.housename,
            addr: house.addr,
            price: house.price,
            bedroom: house.bedroom,
            facilityservices: house.facilityservices,
            image:(house.image.split(',')).map(url => url + '.jpg'),
            masterid: house.masterid, 
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    merchantevaluatefun() {
      this.see=false
      this.showuserTable = false 
      this.showmerchantTable =false
      this.showmerchanthouse = false
      this.merchantevaluate = true
      this.dingdanguanlixianshi = false
      axios.get('http://localhost:8081/evaluate/merchant')
        .then(response => {
          console.log('响应数据：', response.data);
          this.evaluatemerchantData = response.data.map(eva => ({
            id: eva.id,
            userid: eva.userid,
            merchantid: eva.merchantid,
            star: eva.star,
            evaluate: eva.evaluate,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    dingdanguanli() {
      this.see=false
      this.showuserTable = false 
      this.showmerchantTable =false
      this.showmerchanthouse = false
      this.merchantevaluate = false
      this.dingdanguanlixianshi = true
      axios.get('http://localhost:8081/order/findallorder')
        .then(response => {
          console.log('响应数据：', response.data);
          this.orderdata = response.data.map(order => ({
            id: order.id,
            houseid: order.houseid,
            userid: order.userid,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    selectallmerchat() {
      this.see=false
      this.showuserTable = false 
      this.showmerchantTable =true
      this.showmerchanthouse = false
      this.merchantevaluate = false
      this.dingdanguanlixianshi = false
      axios.get('http://localhost:8081/merchant/findallmerchant')
        .then(response => {
          console.log('响应数据：', response.data);
          this.tableData1 = response.data.map(merchant => ({
            id: merchant.id,
            name: merchant.merchantname,
            account: merchant.merchantaccount,
            password: merchant.merchantpassword,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    handleSearch() {
      // 在这里访问 this.searchText 变量获取搜索框中的内容
      // 可以在这里执行搜索操作或其他需要使用搜索内容的逻辑
      axios.get('http://localhost:8081/user/finduser/'+this.searchText)
        .then(response => {
          console.log('响应数据：', response.data);
          this.tableData = response.data.map(user => ({
            id: user.id,
            name: user.username,
            account: user.useraccount,
            password: user.userpassword
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    selectmerchanteva() {
      axios.get('http://localhost:8081/evaluate/findmerchanteva/'+this.searchText)
        .then(response => {
          console.log('响应数据：', response.data);
          this.evaluatemerchantData = response.data.map(eva => ({
            id: eva.id,
            userid: eva.userid,
            merchantid: eva.merchantid,
            star: eva.star,
            evaluate:eva.evaluate,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    sousuodingdan() {
      axios.get('http://localhost:8081/order/searchorder/'+this.searchText)
        .then(response => {
          console.log('响应数据：', response.data);
          this.orderdata = response.data.map(order => ({
            id: order.id,
            houseid: order.houseid,
            userid: order.userid,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    handleSearch1() {
      // 在这里访问 this.searchText 变量获取搜索框中的内容
      // 可以在这里执行搜索操作或其他需要使用搜索内容的逻辑
      axios.get('http://localhost:8081/merchant/findmerchant/'+this.searchText)
        .then(response => {
          console.log('响应数据：', response.data);
          this.tableData1 = response.data.map(merchant => ({
            id: merchant.id,
            name: merchant.merchantname,
            account: merchant.merchantaccount,
            password: merchant.merchantpassword
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    selecthouse() {
      axios.get('http://localhost:8081/house/findhouse/'+this.searchText)
        .then(response => {
          console.log('响应数据：', response.data);
          this.allhouseData = response.data.map(house => ({
            id: house.id,
            housename: house.housename,
            addr: house.addr,
            price: house.price,
            bedroom: house.bedroom,
            facilityservices: house.facilityservices,
            image:(house.image.split(',')).map(url => url + '.jpg'),
            masterid: house.masterid,
          }));
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    handleAdd() {
      this.dialogVisible1 = true;
      this.editForm = {
        username: '',
        account: '',
        password: ''
      };
    },
    handleAdd1() {
      this.dialogVisible3 = true;
      this.editForm1 = {
        merchantname: '',
        account: '',
        password: ''
      };
    },
    handleConfirmEdit1() {
      // 省略其他逻辑
      // 在这里获取新增用户的信息
      const newUsername = this.editForm.username;
      const newAccount = this.editForm.account;
      const newPassword = this.editForm.password;
      axios.get('http://localhost:8081/user/adduser/' + newUsername + "/"+ newAccount+"/"+ newPassword )
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '添加成功',
            type: 'success'
          });
            this.fetchData()
          } else {
            alert("增加失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      // 向后端发送请求新增用户
      // ...
      this.dialogVisible1 = false; // 关闭编辑对话框
    },
    quedingxiugaidingdanfangfa() {
      // 省略其他逻辑
      // 在这里获取新增用户的信息
      const id = this.bianjidingdandata.id;
      const houseid = this.bianjidingdandata.houseid;
      const userid = this.bianjidingdandata.userid;
      axios.get('http://localhost:8081/order/updateorder/' + id + "/"+ houseid+"/"+ userid )
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
            this.dingdanguanli()
          } else {
            alert("修改失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      // 向后端发送请求新增用户
      // ...
      this.bianjidingdan = false; // 关闭编辑对话框
    },
    handleEdit(row) {
      this.dialogVisible = true;
      var rowData = this.tableData.find(item => item.id == row.id);
      this.editForm = {
        id: row.id,
        username: rowData.name,
        account: rowData.account,
        password: rowData.password
      };
    },
    editevaluate(row) {
      this.evaluateEdit = true;
      var rowData = this.evaluatemerchantData.find(item => item.id == row.id);
      this.editEvaForm = {
        id: row.id,
        star: rowData.star,
        evaluate: rowData.evaluate,
      };
    },
    bianjidingdanfangfa(row) {
      this.bianjidingdan = true;
      var rowData = this.orderdata.find(item => item.id == row.id);
      this.bianjidingdandata = {
        id: row.id,
        houseid: rowData.houseid,
        userid: rowData.userid,
      };
    },
    handleEdit1(row) {
      this.dialogVisible2 = true;
      var rowData = this.tableData1.find(item => item.id == row.id);
      this.editForm1  = {
        id: row.id,
        merchantname: rowData.name,
        account: rowData.account,
        password: rowData.password
      };
    },
    changeva(row) {
      const id = this.editEvaForm.id;
      const star = this.editEvaForm.star;
      const evaluate = this.editEvaForm.evaluate;
      // 在这里进行编辑后的操作，比如发送请求更新数据等
      // ...
      axios.get('http://localhost:8081/evaluate/updatemerchanteva/' + id + "/" + star + "/" + evaluate )
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          });
            this.merchantevaluatefun()
          } else {
            alert("修改失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      this.evaluateEdit = false; // 关闭编辑对话框
    },
    handleDelete(row) {
      axios.get('http://localhost:8081/user/deleteuser/' + row.id)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.fetchData()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    deletemerchantevaluate(row) {
      axios.get('http://localhost:8081/evaluate/deletemerchant/' + row.id)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.merchantevaluatefun()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    deleteorder(row) {
      axios.get('http://localhost:8081/order/deleteorder/' + row.id)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.dingdanguanli()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    deletehouse(row) {
      axios.get('http://localhost:8081/house/deletehouse/' + row.id)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.merchanthouse()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    merchantDelete(row) {
      axios.get('http://localhost:8081/merchant/deletemerchant/' + row.id)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.selectallmerchat()
          } else {
            alert("删除失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
    },
    handleConfirmEdit() {
      const id = this.editForm.id;
      const editedUsername = this.editForm.username;
      const editedAccount = this.editForm.account;
      const editedPassword = this.editForm.password;
      // 在这里进行编辑后的操作，比如发送请求更新数据等
      // ...
      axios.get('http://localhost:8081/user/updateuser/' + id + "/" + editedUsername + "/" + editedAccount + "/" + editedPassword)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.fetchData()
          } else {
            alert("修改失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      this.dialogVisible = false; // 关闭编辑对话框
    },
    handleConfirmEdit2() {
      const id = this.editForm1.id;
      const editedUsername = this.editForm1.merchantname;
      const editedAccount = this.editForm1.account;
      const editedPassword = this.editForm1.password;
      // 在这里进行编辑后的操作，比如发送请求更新数据等
      // ...
      axios.get('http://localhost:8081/merchant/updatemerchant/' + id + "/" + editedUsername + "/" + editedAccount + "/" + editedPassword)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.selectallmerchat()
          } else {
            alert("修改失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      this.dialogVisible2 = false; // 关闭编辑对话框
    },
    xinzengshanghu() {
      const editedUsername = this.editForm1.merchantname;
      const editedAccount = this.editForm1.account;
      const editedPassword = this.editForm1.password;
      // 在这里进行编辑后的操作，比如发送请求更新数据等
      // ...
      axios.get('http://localhost:8081/merchant/addmerchant/' + editedUsername + "/" + editedAccount + "/" + editedPassword)
        .then(response => {
          if (response.data === true) {
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
            this.selectallmerchat()
          } else {
            alert("增加失败!")
          }
        })
        .catch(error => {
          console.error('发生错误：', error);
        });
      this.dialogVisible3 = false; // 关闭编辑对话框
    },
    addhouse() {
      const formData = new FormData();
  formData.append('housename', this.addPropertyForm.housename);
  formData.append('addr', this.addPropertyForm.addr);
  formData.append('price', this.addPropertyForm.price);
  formData.append('bedroom', this.addPropertyForm.bedroom);
  formData.append('facilityservices', this.addPropertyForm.facilityservices);
  formData.append('masterid', this.addPropertyForm.masterid);
  // 其他房源细节
  // 添加图片文件到 FormData
  this.uploadedImages.forEach((image, index) => {
    formData.append(`image${index}`, image.file);
  });
  // 发送 FormData 到后端
  axios.post('http://localhost:8081/house/addhouse', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(response => {
    console.log('房源添加成功：', response.data);
    this.addhouseVisible4 = false; // 关闭对话框
  })
  .catch(error => {
    console.error('房源添加失败：', error);
  });  
    },
     // Handle image upload success
     handleUploadSuccess(response, file, fileList) {
  const imageUrl = response.data.imageUrl; // 图片的 URL
  const imageFile = file.raw; // 获取上传的文件对象
  // 将图片 URL 和文件对象存储到 uploadedImages 数组中
  this.uploadedImages.push({ url: imageUrl, file: imageFile });
},
// Handle removing uploaded image
handleRemoveImage(file, fileList) {
      // Remove the deleted image URL from uploadedImages array
      const index = this.uploadedImages.indexOf(file.url);
      if (index !== -1) {
        this.uploadedImages.splice(index, 1);
      }
    },
  }
};
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
  /* 饼图css */
  .custom-chart .piechart {
  position: relative;
  width: 300px; /* 调整饼图容器大小 */
  height: 300px; /* 调整饼图容器大小 */
  border-radius: 50%;
  overflow: hidden;
  left: 100px; /* 将整个饼图向右移动 100px */
  top: 100px; /* 将整个饼图向下移动 100px */
}
.custom-chart .slice {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0, 150px, 300px, 0); /* 使用clip属性裁剪扇形 */
  border-radius: 50%;
  transform-origin: center;
}
/* 为每个区块设置不同的颜色 */
.custom-chart .slice:nth-child(1) {
  background-color: #ccc ;
  transform: rotate(0deg) scale(1); /* 进一步调整大小为20份中的某个比例 */
}
.custom-chart .slice:nth-child(2) {
  background-color: pink;
  transform: rotate(144deg) scale(1.2); /* 20份中的12份 */
}
/* 添加标签 */
.custom-chart .slice::after {
  content: attr(data-label); /* 使用data-label属性作为内容 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  text-align: center;
  z-index: 1; /* 提高文本层级 */
}
.custom-pie .chart {
  position: relative;
  margin-left: 740px;
  margin-top: -200px;
  width: 100px; /* 调整柱状图的宽度 */
  height: 300px; /* 调整柱状图的高度 */
}
.custom-pie .bar {
  position: absolute;
  bottom: 0;
  width: 40px; /* 调整柱子宽度 */
}
.custom-pie .male {
  left: 10px; /* 调整男性柱子的左边距 */
  background-color: rgb(173, 216, 230);
  height: 220px; /* 男性柱子高度 */
}
.custom-pie .female {
  left: 55px; /* 调整女性柱子的左边距 */
  background-color: pink;
  height: 242px; /* 女性柱子高度 */
}
.custom-pie11 .pie {
  position: absolute;
  margin-left: 1200px;
  margin-top: -290px;
  width: 300px; /* 调整饼图的宽度 */
  height: 300px; /* 调整饼图的高度 */
  border-radius: 50%; /* 将矩形变为圆形 */
  background-color: lightcoral; /* 设置浅红色的背景色 */
  text-align: center;
  font-size: 24px;
  line-height: 300px; /* 使文本垂直居中 */
}
.custom-pie11 span {
  display: block;
  color: black;
}
</style>
